<template>
  <CustomNav title="首页" :isShowBack="false" bgColor="#f4f5f9"></CustomNav>
  <view class="container">
    <!-- 轮播图 -->
    <u-swiper
      previousMargin="30"
      nextMargin="30"
      circular
      :autoplay="true"
      radius="5"
      @click="ShowImage(current)"
      @change="onSwiperChange"
      height="140"
      bgColor="#ffffff"
      :list="swiperDataList"
    >
    </u-swiper>
    <!-- icon图标 -->
    <view class="menu">
      <view
        class="raw"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handleSkip(item.url)"
      >
        <!-- <u-image :src="item.icon" width="80rpx" height="80rpx"></u-image> -->
        <i class="iconfont" :class="item.icon"></i>
        <text>{{ item.title }}</text>
        <!-- <button
          class="contact"
          open-type="contact"
          @contact="handleContact"
          v-if="item.title == '联系我们'"
        ></button> -->
      </view>
    </view>

    <view v-if="homeStore.checkShowV">
      <u-sticky :offset-top="homeStore.navHeight - 1" bgColor="#f4f5f9">
        <u-tabs :list="tabList" @click="handleTabs"></u-tabs>
      </u-sticky>

      <view class="skeleton" v-if="!resumeDataList?.length">
        <view class="skeleton-item">
          <u-skeleton
            rows="3"
            title
            loading
            avatar
            avatarSize="50"
          ></u-skeleton>
        </view>
        <view class="skeleton-item">
          <u-skeleton
            rows="3"
            title
            loading
            avatar
            avatarSize="50"
          ></u-skeleton>
        </view>
        <view class="skeleton-item">
          <u-skeleton
            rows="3"
            title
            loading
            avatar
            avatarSize="50"
          ></u-skeleton>
        </view>
      </view>
      <view class="dataList" v-else>
        <view class="row" v-for="(item, index) in resumeDataList" :key="index">
          <!-- 左边模块 -->
          <view class="left">
            <u-image
              :show-loading="true"
              :src="item.headPath"
              width="80rpx"
              height="80rpx"
              radius="100%"
            >
              <!-- 加载中 -->
              <template v-slot:loading>
                <u-loading-icon color="#969696"></u-loading-icon>
              </template>
              <!-- 图片路径错误 -->
              <template #error>
                <view
                  style="
                    border: 1px solid rgb(254, 170, 170);
                    border-radius: 100%;
                  "
                >
                  <u-image
                    :show-loading="true"
                    src="./../../static/default_avatar.png"
                    width="80rpx"
                    height="80rpx"
                    radius="100%"
                  ></u-image>
                </view>
              </template>
            </u-image>
          </view>
          <!-- 右边模块 -->
          <view class="right">
            <view class="name">
              <text>{{ item.username }}</text>
              <u-image
                :show-loading="true"
                mode="aspectFit"
                :src="
                  item.gender == 1
                    ? 'https://pic.imgdb.cn/item/6588005ec458853aeffb6922.png'
                    : 'https://pic.imgdb.cn/item/6588005ec458853aeffb69ca.png'
                "
                width="30rpx"
                height="30rpx"
              ></u-image>
            </view>
            <!-- <view class="college"
            >{{ item.college?.this }}·{{ item.college?.major }}</view
          > -->
            <view class="college">{{ item.institute }} · {{ item.grade }}</view>
            <view class="tag">
              <view
                class="tag-row"
                v-for="(item2, index2) in item.domain"
                :key="index2"
              >
                {{ item2 }}
              </view>
            </view>
            <view class="interest">
              <view class="btn" @click="handleInterest(item.id)">感兴趣</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 通用错误 -->
      <!-- <van-empty
        image="error"
        description="暂无内容~"
        v-if="!resumeDataList.length && !resumeDataError"
      /> -->

      <view class="loadmore-container">
        <!-- 加载更多/没有更多了 -->
        <view class="wrap" v-if="resumeDataList?.length">
          <u-loadmore :status="status" :loading-text="loadingText" />
        </view>
      </view>
    </view>
  </view>

  <up-back-top :scroll-top="scrollTop" :z-index="999999"></up-back-top>

  <Tabbar :page="page"></Tabbar>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import indexStore from "@/store/modules/home";
import Tabbar from "@/components/Tabbar/index";
// import colorThief from "colorthief";
import useHomeStore from "@/store/modules/home";
import { helloWorld } from "@/api/test";
import { swiperList, resumeList, getIp, updateIp, checkShow } from "@/api/home";
import env from "@/utils/env";
import { makePhoneCall } from "@/utils/tool";
import { issueStatus } from "@/api/issue";
import { getItem, setItem } from "../../utils/localStorage";

// test
// onMounted(async () => {
//   const result = await helloWorld();
//   // console.log("获取后台的结果：", result);
// });

//
onMounted(async () => {
  const result = await checkShow();

  if (result.data.code == 200) {
    // 1
    homeStore.updateCheckShowV(result.data.data);
  } else {
    // 网络中断，则不显示（0）
    homeStore.updateCheckShowV(0);
  }

  console.log("检查显示：", result);
});

onMounted(async () => {
  // 如果登录了
  if (getItem("userInfo") && getItem("token")) {
    const ipConfig = await getIp();

    console.log("ip:", ipConfig);

    const res = await updateIp({
      id: Number(getItem("userInfo").id),
      province: ipConfig.data.info.prov,
      city: ipConfig.data.info.city,
    });

    console.log("更新ip：", res);
  }
});

const homeStore = useHomeStore();
// 格式化导航高度
const navHeight = `${homeStore.navHeight}px`;

// 当前page的路由路径
const page = ref("/pages/index/index");

// 轮播图
const swiperDataList = ref([]);

onMounted(async () => {
  const result = await swiperList();

  console.log("轮播图：", result);

  swiperDataList.value = result.data.data.result;

  // 格式化路径
  swiperDataList.value = swiperDataList.value.map(
    (item) => `${env.baseUrl}/studio/img/banner/${item.img}`
  );

  // console.log("轮播图result：", swiperDataList.value);
});

const current = ref(0);
const onSwiperChange = (e) => {
  console.log(swiperDataList);
  // 获取当前滑块的索引
  // console.log(e.current);
  current.value = e.current;
};

const ShowImage = (current) => {
  // console.log("current", current);
  uni.previewImage({
    current: current,
    urls: swiperDataList.value,
  });
};

const menuList = ref([
  {
    title: "工作室简介",
    icon: "icon-shequ",
    url: "/pagesA/briefIntroduction/index",
  },
  {
    title: "学习路线",
    icon: "icon-a-bianzu71",
    url: "/pagesA/learningRoute/index",
  },
  {
    title: "联系我们",
    icon: "icon-nanhai",
    url: "联系我们",
  },
  {
    title: "赛项介绍",
    icon: "icon-a-weibiaoti-1_huaban1fuben31",
    url: "/pagesA/events/index",
  },
  {
    title: "项目展示",
    icon: "icon-zhanshipingtai",
    url: "/pagesA/projectShow/index",
  },
]);
// 跳转
const handleSkip = (url) => {
  console.log("url：", url);

  // 之前是打电话模式联系，根据开发者协商改成了客服聊天形式（修改于：2024-7-22）
  // if (url == "联系我们") {
  //   makePhoneCall(env.contactPhone);
  //   return;
  // }

  if (url == "联系我们") {
    uni.switchTab({
      url: "/pages/issue/index",
    });
    return;
  }

  uni.navigateTo({
    url,
  });
};

const typeTabs = ref(0);
const tabList = ref([
  {
    name: "推荐",
  },
  {
    name: "大一",
    badge: {
      // 可以通过在列表对象中加入badge来设置徽标。
      isDot: true, // 显示红点
    },
  },
  {
    name: "大二",
    badge: {
      value: 5, //5条消息
    },
  },
  {
    name: "大三",
    badge: {
      value: 2, //2条消息
    },
  },
]);
// 点击tabs
const handleTabs = (item) => {
  // 不能点击相同的按钮重复发请求
  if (item.index == typeTabs.value) {
    console.log("请勿重复发送请求！");
    return;
  }

  console.log("app:", item);
  typeTabs.value = item.index;

  resumeDataList.value = [];
  total.value = 0;
  pageNo.value = 1;

  // 重新获取新数据
  app();
};

// 简历列表---
const resumeDataList = ref([]);
const pageNo = ref(1); // 哪一页
const limit = ref(5); // 几条
// 数据库中条数
const total = ref(0);

// resume内容的数据请求为0条
const resumeDataError = ref(0);

// 骨架屏状态
const skeletonCode = ref(201);

onMounted(async () => {
  typeTabs.value = undefined;
  app();
});
const app = async () => {
  if (resumeDataList.value?.length) {
    // 获取了数据
    // console.log('进来了', resumeDataList.value.length, total.value)
    // 没有更多了
    if (resumeDataList.value?.length >= total.value) {
      console.log("没有数据了");
      status.value = "nomore";
      return;
    }
  }

  const result = await resumeList(pageNo.value, limit.value, typeTabs.value);

  console.log("简历：", result);

  skeletonCode.value = result.data.code;

  if (result.data.code == 200) {
    resumeDataError.value = result.data.data.result?.length;

    if (resumeDataList.value) {
      resumeDataList.value = [
        ...resumeDataList.value,
        ...result.data.data.result,
      ];
      console.log("拼接数据中...");
      console.log("resumeDataList.value", resumeDataList.value);
    } else {
      resumeDataList.value = result.data.data.result;
    }

    // 格式化路径
    resumeDataList.value.map((item) => {
      item.headPath = `${env.baseUrl}/head/${item.headPath}`;
    });

    console.log("resumeDataList.value：", resumeDataList.value);

    total.value = result.data.data.total;
  }

  // console.log("简历列表result：", result);
};

// 感兴趣
const handleInterest = (thisId) => {
  uni.navigateTo({
    url: `/pagesA/resume/index?thisId=${thisId}`,
  });
};

const scrollTop = ref(0);

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

// 查看简历提交状态
onMounted(async () => {
  // 首先保证登录了
  if (getItem("userInfo").id) {
    const result = await issueStatus();
    console.log("查看简历提交状态：", result);
    // 将状态添加到本地
    setItem("nowIssueStatus", result.data.data); // 1申请成功，0正在审核，-1未提交或审核未通过
  }
});

// 加载更多
// 改变status即可
const status = ref("轻轻上拉");
const loadingText = ref("努力加载中");

// 页面触底事件
onReachBottom(() => {
  if (!homeStore.checkShowV) {
    return;
  }

  status.value = "loading";
  pageNo.value++;
  app();

  console.log("total：", total.value);
});
</script>

<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  padding: 0 30rpx;

  // background-image: linear-gradient(
  //   to bottom,
  //   rgba(204, 222, 253, 0.93),
  //   #f2f7ff,
  //   #f2f7ff,
  //   #f2f7ff,
  //   #ffffff
  // );
  background-color: #f4f5f9;
  min-height: 90vh;

  // padding-bottom: 150rpx;
  padding-top: 20rpx;

  .skeleton {
    margin-top: 32rpx;

    .skeleton-item {
      margin-top: 40rpx;
    }
  }

  .menu {
    display: flex;
    margin: 30rpx 0 10rpx;
    background-color: #fff;
    padding: 20rpx 0;
    box-shadow: 0 0 30rpx #f0f0f0;
    border-radius: 20rpx;
    flex-wrap: wrap;

    height: 350rpx;
    .raw {
      width: 230rpx;
      // flex: 1;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      align-items: center;

      .iconfont {
        font-size: 60rpx;
      }

      text {
        margin-top: 20rpx;
        font-size: 30rpx;
      }
    }
  }

  .dataList {
    border-radius: 20rpx;
    margin-top: 20rpx;

    .row {
      background-color: #fff;
      // box-shadow: 0 0 30rpx #ececec;
      margin-bottom: 20rpx;
      padding: 30rpx 40rpx;
      display: flex;
      border-radius: 16rpx;
      padding-bottom: 0;

      .left {
        margin-right: 25rpx;
      }

      .right {
        flex: 1;

        view {
          margin-bottom: 10rpx;
        }

        .name {
          font-size: 34rpx;
          font-weight: 800;

          display: flex;
          align-items: center;

          text {
            margin-right: 10rpx;
          }
        }

        .college {
          color: #6d6c72;
          font-size: 24rpx;
        }

        .tag {
          display: flex;
          flex-wrap: wrap;

          .tag-row {
            padding: 5rpx 14rpx;
            background-color: #f5f6fa;
            margin-right: 16rpx;
            color: #9e9da0;
            font-size: 22rpx;
            border-radius: 10rpx;
            margin-bottom: 5rpx;
          }
        }

        .interest {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .btn {
            padding: 15rpx 40rpx;
            background-color: #0053fb;
            color: #fff;
            border-radius: 40rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  // 修改u-swiper样式
  :deep(.u-swiper) {
    // height: 400rpx !important;

    width: 750rpx !important;
    margin-left: -30rpx !important;

    background-color: unset !important;
  }
}

// 加载更多容器
.loadmore-container {
  padding-bottom: 150rpx;
}

// 联系我们（客服）
.contact {
  position: absolute;
  height: 130rpx;
  width: 205rpx;
  background-color: transparent;

  &::after {
    border: none;
  }
}
</style>
